<template>
  <div class="news-container">
    <h1>2025“百城千校万企”促就业行动在湖北启动</h1>
    <p class="date">2025年4月1日</p>
    <div class="content">
      <div class="image-container">
        <img src="@/../public/imgs/news/4.png" alt="2025‘百城千校万企’促就业行动启动" style="width: 100%; height: auto; object-fit: cover;">
      </div>
      <div class="text-container">
        <p>4月1日，全国工商联联合教育部在武汉启动2025“百城千校万企”促就业行动，超3万家企业提供27万个岗位。</p>
        <p>在湖北工业大学招聘会现场，毕业生与企业代表热烈交流，涵盖科技、制造、服务业等领域。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 示例数据，实际项目中可以从API获取
const newsContent = ref({
  title: '2025“百城千校万企”促就业行动在湖北启动',
  date: '2025年4月1日',
  paragraphs: [
    '4月1日，全国工商联联合教育部在武汉启动2025“百城千校万企”促就业行动，超3万家企业提供27万个岗位。',
    '在湖北工业大学招聘会现场，毕业生与企业代表热烈交流，涵盖科技、制造、服务业等领域。'
  ],
  imageUrl: '@/../public/imgs/news/5.png'
})
</script>

<style scoped>
.news-container {
  width: 80%;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
}

p {
  line-height: 1.6;
  color: #666;
}

.date {
  color: #999;
  font-size: 0.9em;
}

.content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.image-container {
  flex: 1;
  max-width: 50%;
  padding-right: 20px;
  box-sizing: border-box;
}

.text-container {
  flex: 1;
  max-width: 50%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .image-container, .text-container {
    max-width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
}
</style>
